感謝 iT 邦幫忙與博碩文化，本系列文章已出版成書「從 Hooks 開始，讓你的網頁 React 起來」，首刷版稅將全額贊助 iT 邦幫忙鐵人賽，歡迎前往購書，鼓勵筆者撰寫更多優質文章。
大約今年（2019）二月， React 16.8 版開始正式支援 Hooks 的用法，熟悉 React 的開發者即使還沒自己用過，但一定聽過 Hooks 這個詞；對於原本 Vue 的開發者來說，在 Vue Function-based API RFC 中也試著把 React Hooks 中以「函式」來複用邏輯的概念放入 Vue 原本的框架中。
到底這個大家都在說的神奇鉤子（Hooks）是什麼？
在接下來的 30 天中，每天的內容會控制在 10 分鐘以內，讓大家可以在工作或下班後的閒暇之餘，順便學習一些新東西，也可以追蹤 PJCHENder 網頁前端資源站 ，這 30 天會定期每天推播一篇文章！
簡單來說，這 30 天的內容就是希望能讓沒學過 React 的開發者能夠從 Hooks 直接上手 React，正因為你沒接觸過 React，所以你可以完全不受過去經驗的影響，學起來反而沒有什麼包袱，甚至可能更容易上手，因為 Hooks 是一個新的思維方式，而你不會一直想要把新東西對應回傳統的寫法。
沒學過 React 反而可能是你的優勢
雖然這麼說，但在學習 React Hooks 之前，還是需要你至少有基本的網頁和 JavaScript 的知識。如果你是完全沒有任何網頁開發經驗的初學者，這 30 天可能「目前」還不太適合你，下面列出幾個我認為在閱讀這 30 天前至少該有的基本能力：
怎麼覺得好像在寫職缺需要具備的能力...。如果沒有上述這些基本能力，直接看這 30 天我覺得可能會有點吃力，真心建議先把基本的能力補起來之後，再回頭看這 30 天，一步一步來才不會覺得挫折感太重而放棄（反正文章放著沒有限免...想回頭隨時來看都可以）。
對於沒有 React 經驗的開發者來說，這 30 天會從 React 的基礎講起，學習如何把網頁透過 JSX 放入 JavaScript 中，接著我們會進到函式型組件（functional component）、最後開始運用 Hooks 來完成各種不同的功能，包括在 React 各個組件中進行資料傳遞、製作具有互動效果的網頁、透過 AJAX 拉取資料、基本的表單處理等等。
這裡你可能會覺得有很多不同的名詞，什麼 JSX、函式型組件（functional component） 、資料傳遞、狀態（state）和 props 等等，這些你不必擔心，內文中都會逐一涵蓋到這些內容。
唯一需要你主動去做的，就是當你在閱讀中看到不懂、不確定用法的東西時，如果是 JavaScript 語法部分，請你使用「JS 關鍵字 + MDN」去做搜尋，例如，當你看到程式中出現 const { age } = data 解構賦值的用法而你不知道這是什麼意思時，請試著使用關鍵字「解構賦值 MDN」去尋找並閱讀資料：
如果是 React 相關的，則可以到 React 的官方網站去搜尋。同時我也會在內容的最下方列出可以參考資源，如果有不清楚或想要瞭解更多的話，都可以從參考資源去找。
最後在這 30 天中，我們並不會提到傳統上 React 使用的 class 組件、生命週期等概念，雖然在新的 React 中你不需要這些東西就可以做到各種功能，但這些東西仍然相當重要，特別是如果你需要和其他團隊成員共同開發，或者維護其他人的專案。
這 30 天帶你從 Hooks 開始認識、熟悉並使用 React，但不要忘記，這只是個開始。
對於有經驗的 React 開發者來說，過去學習 React 時大多是從 ES6 中的 class 語法開始學起，透過一個又一個的 class 來建立不同的組件（component），然後學習 React 中不同組件是如何掛載到網頁上、重新渲染、最後到脫離網頁上的這一整個生命週期（life cycle）。
這樣的學習途徑並沒有任何錯誤，但在學習 Hooks 的時候勢必會碰到一點阻礙，就是你會一直想要把 Hooks 的寫法或概念對應回傳統 class 的寫法，因為你認為這樣有助於你更釐清這個新東西，但實際上卻不一定如此。如同 Redux 的作者 Dan Abramov 所說，Hooks 是一個新的思維方式，因此有些時候，你必須忘掉原本學過的，這樣反而更能幫助你學習新的事物。
看似反其道而行，但有些時候，你必須先忘掉原本學過的，如此更能幫助你學習新的事物
如果你已經撰寫過 React 的話，可以直接跳到你需要的單元後閱讀即可，不需要從頭開始看那些已經知道的內容。
只有一點要比較提醒的是，在學習 React Hooks 的過程中，希望你可以先假裝沒學過 React 的 class 組件、生命週期等等，因為如果一直想要把新語法對應回傳統的知識，學起來會發現這裡卡卡的、那裡卡卡的。等到你對於 Hooks 的思維漸漸熟練後，再回過頭去對應傳通 React 的寫法，相信你更能夠統整這兩種不同語法。
有了 React Hook，就可以在 function 組件使用 state 和 effect 了，期待大大的文章 ~
謝謝大大版主寫React Hook教學文章，終於可以好好學習。
希望有幫助喔，內容如果有任何不清楚或錯誤的地方，都歡迎提問喔！
iThome鐵人賽
看影片追技術